<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div id="wrapBg">
        <div id="headTitle">
            <img src="./img/bird0.png" alt="" id="headBird">
        </div>
        <button id="startBtn"></button>
        <div id="grassLand1"></div>
        <div id="grassLand2"></div>
    </div>

    <script src="./js/bird.js"></script>
    <script src="./js/block.js"></script>
    <script>
        var jsWrapBg = document.getElementById('wrapBg')
        var jsHeadBird = document.getElementById('headBird')
        //循环控制headTitle容器的top值的加减
        var jsHeadTitle = document.getElementById('headTitle')
        // console.log(jsHeadTitle)
        var Y = 3 //标题摆动的幅度
        // 定时器
        var headWaveTimer = setInterval(headWave,200)
        function headWave() {
            Y = Y * -1           
            jsHeadTitle.style.top = jsHeadTitle.offsetTop + Y + 'px'   //jsHeadTitle.offsetTop获取距离副容器顶部的距离
            //翅膀扇动
            if(Y > 0){
                jsHeadBird.src = "./img/bird1.png"
            }else{
                jsHeadBird.src = "./img/bird0.png"
            }
            
        }

        //草地
        var jsGrassLand1 = document.getElementById('grassLand1')
        var jsGrassLand2 = document.getElementById('grassLand2')
        setInterval(landRun,30)//草地移动
        function landRun() {
            if(jsGrassLand1.offsetLeft <= -343){
                jsGrassLand1.style.left = 343 + 'px'
            }
            if(jsGrassLand2.offsetLeft <= -343){
                jsGrassLand2.style.left = 343 + 'px'
            }
            jsGrassLand1.style.left = jsGrassLand1.offsetLeft - 3 + 'px'
            jsGrassLand2.style.left = jsGrassLand2.offsetLeft - 3 + 'px'
        }
        
        //开始游戏
        var jsStartBtn = document.getElementById('startBtn')
        jsStartBtn.onclick = function(){
            jsHeadTitle.style.display = 'none'  //隐藏
            clearInterval(headWaveTimer)     //定时器headWaveTimer停止
            jsStartBtn.style.display = 'none'

            //出现一只小鸟
            bird.showBird(jsWrapBg)
            bird.flyBird()
            bird.wingWave()

            jsWrapBg.onclick = function(){
                bird.fallSpeed = -8
            }

            //出现管道
            var b = new Block()
            b.createBlock()
            

        }    
    </script>

</body>
</html>